<template>

	<!--顶部新增、查询-->
    <div style="margin-bottom: 10px;">
		<el-input v-model="SalesSearchInput" style="width: 240px" placeholder="按销售记录编号搜索" :prefix-icon="Search"/>
    </div>

    <!--销售记录数据展示表格-->
    <el-table :data="GetSalesData" style="width: 100%; margin-top: 15px;" highlight-current-row>
        <el-table-column fixed prop="salesID" label="账单编号" align="center"/>
        <el-table-column prop="salesDate" label="账单日期" align="center"/>
        <el-table-column prop="salesPrice" label="账单总价" align="center"/>
        <el-table-column prop="salesState" label="账单状态" align="center"/>
		<el-table-column fixed="right" label="操作" min-width="120" align="center">
            <template #default="ThisRowData">
				<el-button size="small" type="primary" @click="ViewSalesClick(ThisRowData.row)"style="margin-right: 5px;">
                    <el-icon><Tickets /></el-icon>
                    详情
                </el-button>
                <el-button size="small" type="primary" @click="EditSalesClick(ThisRowData.row)"style="margin-right: 5px;">
                    <el-icon><Edit /></el-icon>
                    修改
                </el-button>
                <el-button size="small" type="danger" @click="DeleteSalesClick(ThisRowData.row)":disabled="ThisRowData.row.productCount > 0"tooltip-content="分类下有商品，不可删除">
                    <el-icon><Delete /></el-icon>
                    删除
                </el-button>
            </template>
        </el-table-column>

        <template #empty>
            <el-empty description="暂无销售记录数据" />
        </template>
    </el-table>

	<!--详情的对话框 -->
    <el-dialog v-model="ViewSalesDialog" title="账单商品列表" width="800">
		<el-table :data="GetSalesItemData">
			<el-table-column property="merchandiseId" label="商品编号" align="center"/>
			<el-table-column property="merchandiseName" label="商品名称" align="center"/>
			<el-table-column property="merchandisePrice" label="商品单价" align="center"/>
			<el-table-column property="merchandiseQuantity" label="商品数量" align="center"/>
			<el-table-column property="merchandiseTotolPrice" label="商品总价" align="center"/>
		</el-table>

	</el-dialog>

    <!--修改的对话框 -->
    <el-dialog v-model="EditSalesDialog" title="账单信息修改" width="500">
        <el-form :model="PutSalesData">
            <el-form-item label="账单状态">
                <el-select v-model="PutSalesData.SalesState">
                    <el-option label="已完成" value="已完成" />
                    <el-option label="未完成" value="未完成" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="EditSalesDialog = false">
                    取消
                </el-button>
                <el-button type="primary" @click="PutSales">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 删除对话框 -->
    <el-dialog v-model="DeleteSalesDialog" title="销售记录删除提示" width="500">
        <span>是否确定删除该销售记录？</span><br>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="DeleteSalesDialog = false">取消</el-button>
                <el-button type="primary" @click="DeleteSales">确定</el-button>
            </div>
        </template>
    </el-dialog>
  
</template>

<script lang='ts' setup name='Sales'>

// 导入必要组件
import axios from 'axios';
import { reactive, ref, onMounted, watch } from 'vue';
import { ElNotification } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

// 生命周期钩子，组件挂载后初始化数据
onMounted(async () => {
    await GetSales()
})

// 对话框显示参数
let ViewSalesDialog = ref(false)
let EditSalesDialog = ref(false)
let DeleteSalesDialog = ref(false)

// 表格单行销售记录数据
let RowSalesData = ref({
    salesID: 0,					// 销售记录编号（后端生成）
    salesDate: 0,		        // 销售记录日期时间（后端生成）
    salesPrice: 0,				// 销售记录总价（后端计算）
    salesState: "已完成",		 // 销售记录状态
})

// 输入框接收到的商品编号
let SalesSearchInput = ref('')

// 随时查询
watch(
	SalesSearchInput, (New, Old) => {
		GetSalesById()
	}
)

// 修改回调
function EditSalesClick(RowData: any){

	// 保存行数据
	RowSalesData.value = RowData

	// 打开对话框
    EditSalesDialog.value = true
}

// 详情回调
function ViewSalesClick(RowData: any){

	// 保存行数据
	RowSalesData.value = RowData
	
	// 查询
	GetSalesItem()

	// 打开对话框
	ViewSalesDialog.value = true
}

// 删除回调
function DeleteSalesClick(RowData: any){

	// 保存行数据
	RowSalesData.value = RowData

	// 打开对话框
    DeleteSalesDialog.value = true
}

// GET ------------------------------------------ GET //

// GET: 获取的销售记录数据
const GetSalesData = ref([{}])

// GET: 获取的销售记录商品列表数据
const GetSalesItemData = ref([{}])

// GET: 获取销售记录数据
async function GetSales(){

	try {

		// url: 询所有账单的信息
        const response = await axios.get(`/api/sales/`);
        GetSalesData.value = response.data.data || [];
    } catch (error) {
        ElNotification.error({ message: '获取销售记录失败' });
    }

}

// GET: 获取编号销售记录数据
async function GetSalesById(){
	try {

		// url: 按编号查询账单的信息
        const response = await axios.get(`/api/sales/${SalesSearchInput}`);
        GetSalesData.value = response.data.data || [];
    } catch (error) {
        ElNotification.error({ message: '获取销售记录失败' });
    }
}

// GET: 获取编号销售记录数据商品列表
async function GetSalesItem(){
	try {

		// url: 按编号查询账单的商品列表信息
        const response = await axios.get(`/api/sales/${RowSalesData.value.salesID}`);
        GetSalesItemData.value = response.data.data || [];
    } catch (error) {
        ElNotification.error({ message: '获取销售记录详情失败' });
    }
}

// PUT ------------------------------------------ PUT //

// PUT: 修改的销售记录数据
let PutSalesData = reactive({
	SalesID: 0,					// 销售记录编号（后端生成）
    SalesDate: 0,		        // 销售记录日期时间（后端生成）
    SalesPrice: 0,				// 销售记录总价（后端计算）
    SalesState: "已完成",		 // 销售记录状态
})

// PUT: 修改销售记录数据
async function PutSales(){
    try {
        await axios.put(`/api/sales/${PutSalesData.SalesID}`, PutSales);
        ElNotification.success({ message: '销售记录修改成功' });
        EditSalesDialog.value = false;
        await GetSales();
    } catch (error) {
        ElNotification.error({ message: '销售记录修改失败' });
    }
}

// DELETE ------------------------------------------ DELETE //

// DELETE: 删除销售记录数据
async function DeleteSales(){
    try {
        await axios.delete(`/api/employee/${PutSalesData.SalesID}`);
        ElNotification.success({ message: '销售记录删除成功' });
        await GetSales();
    } catch (error) {
        ElNotification.error({ message: '销售记录删除失败' });
    }
	EditSalesDialog.value = false;
}

</script>

<style scoped>

/* 表格居中设置 */
.el-table-column {
    text-align: center;
}

</style>